#map-canvas {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.close-detail {
    right: 0.5rem;
    top: 0.5rem;
    font-size: 1.4rem;
    font-family: arial;
    cursor:pointer;
}

#location-detail {
    transform: translate3d(-100%,0,0);
    transition: 0.2s ease-in;
    z-index: 7; 
    width: 360px;
}

#location-detail.open {
    transform: translate3d(0,0,0)
}

.leaflet-pane {
	z-index: 5 !important;
}

.leaflet-top, .leaflet-bottom {
	z-index: 6 !important;
}

.leaflet-control-layers-overlays input {
    display: none;
}

.leaflet-control-layers-overlays > label > div > span {
	font-family: 'Lato', sans-serif;
	
	cursor: pointer;
}

.leaflet-control-layers-overlays .layer-control {
    color: #fff;
    padding: 0.1rem 0.5rem;
    
    border: 1px solid;
    font-size: 1rem;
    transition: 0.3s ease-out;

	display: flex;
    align-items: center;
    justify-content: space-between;
}

.leaflet-control-layers-overlays  .layer-control.active {
    background-color:#fff;
    
    border: 1px solid;
    font-size: 1rem;
}

.leaflet-control-layers-overlays  .layer-control.active i {
	display:none
}

.layer-control.services {
    background-color:#f1592a;
    border-color: #f1592a;
}

.layer-control.services.active {
    color: #f1592a;
    border-color: #f1592a;
}

.layer-control.parks {
    background-color:#0b9444;
    border-color: #0b9444;
}

.layer-control.parks.active {
    color: #0b9444;
    border-color: #0b9444;
}

.layer-control.strong {
    background-color:#fec940;
    border-color: #fec940;
}

.layer-control.strong.active {
    color: #fec940;
    border-color: #fec940;
}

.layer-control.arts {
    background-color:#92278f;
    border-color: #92278f;
}

.layer-control.arts.active {
    color: #92278f;
    border-color: #92278f;
}

.layer-control.aquatics {
    background-color:#00aeef;
    border-color: #00aeef;
}

.layer-control.aquatics.active {
    color: #00aeef;
    border-color: #00aeef;
}

.layer-control.recreation {
    background-color:#0451a5;
    border-color: #0451a5;
}

.layer-control.recreation.active {
    color: #0451a5;
    border-color: #0451a5;
}

@media  (max-width:479px) {
    .map.content-wrap {
        max-width: 100%;
    }

    #location-detail {
        width: calc(100% - 1.5rem);
    }
    
}